<template>
  <div>
    <Form :model="modelForm" ref="addForm" class="addApiGroup-form" :rules="rule" label-position="top">
      <Form-item prop="path" :label="$t('module.treeManage.nodeName')">
        <div class="apiGroup-path">
          <div class="parent-prefix">{{ prefix }}</div>
          <Input placeholder v-model.trim="modelForm.path" :maxlength="32"></Input>
          <div class="group-suffix">
            <span>{{ suffix }}</span>
          </div>
        </div>
      </Form-item>
    </Form>
  </div>
</template>
  <script>
import { apiGroup } from '@/api/apiManagement.js'
export default {
  name: 'addApiGroup',
  mixins: [],
  props: {
    apiGroupInfo: {
      type: Object,
      default: null
    },
    currentRootNode: {
      type: Object,
      default: null
    },
    tenantCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      modelForm: {
        parentId: '', // 父节点ID
        path: '', // 分组名称/路径
        tenantCode: '' // 租户编码
      },
      prefix: '',
      suffix: '/**',
      rule: {
        path: [
          { required: true, message: this.$t('module.treeManage.warning.enterNodeName'), trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9-_]*$/, message: '只允许输入数字、字母以及 - _ ', trigger: 'blur' }
        ]
      },
      actions: [
        {
          text: this.$t('common.save'),
          theme: 'primary',
          handle: this.save,
          loading: false
        },
        {
          text: this.$t('common.close'),
          handle: () => {
            this.$emit('Close')
          }
        }
      ]
    }
  },
  computed: {
    apiGroupPath() {
      return `${this.prefix}${this.modelForm.path}${this.suffix}`
    }
  },
  created() {
    if (this.apiGroupInfo) {
      let str = ''
      const fixArr = this.apiGroupInfo.path.split('/')
      fixArr.forEach((element, index) => {
        if (index < fixArr.length - 1) str += element + '/'
      })
      this.prefix = str
    }
    this.$emit('SetTitle', this.$t('添加子节点'))
    this.$emit('SetPageWidth', 500)
    this.$emit('SetPageMinHeight', 120)
    this.$emit('SetPageActions', this.actions)
  },
  methods: {
    save() {
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          this.actions[0].loading = true
          const paramObj = {
            parentId: this.apiGroupInfo.id,
            path: this.apiGroupPath,
            routeId: this.currentRootNode.routeId,
            tenantCode: this.tenantCode
          }
          apiGroup
            .addGroup(paramObj)
            .then(response => {
              this.$message.success({
                content: this.$t('common.addSuccess'),
                duration: 3
              })
              this.$emit('Close', true)
            })
            .catch(() => {
              this.actions[0].loading = false
            })
        } else {
          this.actions[0].loading = false
          this.$message.error({
            content: this.$t('common.formValidateFailed'),
            duration: 3
          })
        }
      })
    }
  }
}
</script>
  <style lang="less" scoped>
.addApiGroup-form {
  // /deep/.ivu-form-item-label {
  //   margin-bottom: 14px;
  // }
  .apiGroup-path {
    display: flex;
    /deep/.ivu-input-wrapper {
      flex: 1;
      min-width: 140px;
      .ivu-input{
        padding: 0 10px;
        height: 100%;
      }
    }
    .parent-prefix,
    .group-suffix {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #858b9c;
      letter-spacing: 0.22px;
      font-weight: 400;
      padding: 0 10px;
      background-color: #f8f8f9;
      color: #515a6e;
      border: 1px solid #d8d8d8;
      border-radius: 4px;
    }
    .parent-prefix {
      // padding: 0 10px;
      word-break: break-all;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      border-right: none;
      border-bottom-right-radius: 0 !important;
      border-top-right-radius: 0 !important;
    }
    .group-suffix {
      display: flex;
      align-items: center;
      border-bottom-left-radius: 0 !important;
      border-top-left-radius: 0 !important;
      border-left: none;
    }
  }
}
</style>